import { useEffect, useState } from 'react';

export const useMedia = (query: string) => {
  const [match, setMatch] = useState(window.matchMedia(query));

  useEffect(() => {
    const handleWindowResize = () => {
      setMatch(window.matchMedia(query));
    };

    window.addEventListener('resize', handleWindowResize);

    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  useEffect(() => {
    setMatch(window.matchMedia(query));
  }, [query]);

  return match;
};
